<template>
        <div class="body">
            <table class="table table-bordered">
                <tbody><tr>
                    <th>用户名</th>
                    <th>电话</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.username}}</td>
                    <td>{{item.email}}</td>
                    <td v-text="item.isDelete==1?'已禁用':'已启用'"></td>
                    <td>
                        <button type="button" :class="item.isDelete==1?'btn btn-success':'btn btn-danger '"  v-text="item.isDelete==1?'启用':'禁用'" @click="changeIsDelete(item.isDelete,item.id)">禁用</button>
                    </td>
                </tr>
                </tbody></table>
        </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
                list:[]
            }
        },
        created(){
          this.getUserList();
        },
        methods:{
            getUserList(){
                this.$http.get('http://127.0.0.1:3002/getAllUser').then((result)=>{
                    if(result.body.status == 0){
                       this.list = result.body.message;
                    }else{
                        Toast('您的网络抽风');
                    }
                });
            },
            changeIsDelete(isDelete,id){
                if(isDelete == 1){
                    isDelete = 0;
                }
                else if(isDelete == 0 ){
                    isDelete = 1;
                }
                this.$http.get('http://127.0.0.1:3002/updateIsDelete?isDelete='+isDelete+'&id='+id).then((result)=>{
                    console.log(isDelete);
                    if(result.body.status == 0){
                        Toast(result.body.message);
                        location.reload();
                    }else {
                        Toast('您的网络抽风了')
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>